<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
    <meta charset="UTF-8">
    <title>班级表</title>
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newBanji()">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editBianji()">Edit</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteBanji()">Remove</a>
</div>
<!--表单以及弹窗的定义-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div style="color: skyblue">班级信息</div><hr />
    <form id="form">
        <table cellpadding="5">
            <tr>
                <td>班级号：</td>
                <td><input class="easyui-textbox"  style="width: 100px;height:32px" type="number" name="bid" id="bid" ></td>
            </tr>
            <tr>
                <td>班级名:</td>
                <td><input class="easyui-textbox"  style="width: 100px;height:32px" type="text" name="bname" id="bname" data-options="required:true"></td>
            </tr>
        </table>
    </form>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveBanji()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</div>
<script type="text/javascript">
    var url ="";
    <!--datagrid表格加载-->
    $("#dg").datagrid({
        url:'/BanjiController/banjiData',
        singleSelect:true,
        toolbar:'#toolbar',
        rownumber:'true',
        fitColumns:'true',
        pagination:"true",
        pageSize:10,
        columns:[[
            {field:'bid',title:'班号',with:100},
            {field:'bname',title:'班级名称',width:100},
        ]]
    });
//    弹窗以及form表单的加载
    $("#dlg").dialog({});
    $("#form").form({});

    //函数的实现
    function newBanji() {
        $("#dlg").dialog('open').dialog('setTitle','New Banji');
        $("#form").form('clear');
        $("#bid").textbox('readonly',false);
        url = '/BanjiController/saveBanji';
    }
    function editBianji() {
        var row = $("#dg").datagrid('getSelected');
        if(row){
            $("#dlg").dialog('open').dialog('setTitle','Edit Banji');
            $("#bid").textbox('readonly',true);
            $("#form").form('load',{
                bid:row.bid,
                bname:row.bname,
            });
        }
        url = '/BanjiController/updataBanji';
    }
    function saveBanji() {
        $("#form").form('submit',{
            url:url,
            success:function(result){
                $("#dlg").dialog('close');
                $("#dg").datagrid('reload');
            }
        }) ;
    }
    function deleteBanji() {
        var row = $("#dg").datagrid('getSelected');
        if(row){
            $.messager.confirm('Confirm','你确定要删除这个班级吗？',function (r) {
               if(r){
                   $.post('/BanjiController/deleteBanji',row,function (result) {
                       $("#dg").datagrid('reload');
                   });
               }
            });
        }
    }

    //    分页
    function pagerFilter(data){
        if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage:function(pageNum, pageSize){
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh',{
                    pageNumber:pageNum,
                    pageSize:pageSize
                });
                dg.datagrid('loadData',data);
            }
        });
        if (!data.originalRows){
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }
    $(function(){
        $('#dg').datagrid({loadFilter:pagerFilter});
    });
</script>

</body>
</html>